<template>
    <div class="nav-switch">
        <span :class="currSwitch == 1 ? 's-active' : ''" @click="handleClick(1)">重量</span>
        <div :class="['s-triangle', 's-triangle-l', currSwitch == 1 ? 'l-active' : '']"></div>
        <div :class="['s-triangle', 's-triangle-r', currSwitch == 2 ? 'r-active' : '']"></div>
        <span :class="currSwitch == 2 ? 's-active' : ''" @click="handleClick(2)">数量</span>
    </div>
</template>

<script>
export default {
    props: {
        currSwitch: {
            type: Number
        },
        stats: {
            type: String,
            default: ''
        }
    },
    methods: {
        handleClick(num){
            this.$emit('handleClick', this.stats, num)
        }
    }
}
</script>

<style lang="less">
.nav-switch{
    position: absolute;
    right: 140px;
    top: 10px;
    width: 95px;
    cursor: pointer;
    span{
        display: inline-block;
        padding: 3px 4px;
        font-size: 16px;
        color: #949494;
        background: #E0E0E0;
        vertical-align: middle;
        &:first-child{
            border-top-left-radius: 5px;
            border-bottom-left-radius: 5px;
        }
        &:last-child{
            border-top-right-radius: 5px;
            border-bottom-right-radius: 5px;
            float: right;
        }
    }
    .s-active{
        color: #fff;
        background: #808080;
        transition: .3s;
    }
    .s-triangle{
        width: 0;
        height: 0;
        content: '';
        position: absolute;
        top: 0;
    }
    .s-triangle-l{
        border-right: 11px solid transparent;
        border-bottom: 0px solid transparent;
        border-top: 28px solid #E0E0E0;
        border-left: 1px solid #E0E0E0;
        left: 40px;
    }
    .s-triangle-r{
        border-top: 28px solid transparent;
        border-left: 0px solid transparent;
        border-bottom: 0px solid #E0E0E0;
        border-right: 11px solid #E0E0E0;
        left: 44px;
    }
    .l-active{
        border-top: 28px solid #808080;
        border-left: 1px solid #808080;
        transition: .3s;
    }
    .r-active{
        border-bottom: 0px solid #808080;
        border-right: 11px solid #808080;
        transition: .3s;
    }
}
</style>
